<template>
  <div class="order">
    <ul>
      <li class="container radius bcl-mask mt-15" v-for="(v, i) in 5" :key="i">
        <div class="flex flex-cc mb-10">
          <img style="width: 120px; height: 80px" class="mr-15" />

          <div class="flex-1">
            <div>洗面奶</div>
            <div>
              <span class="cl-success">{{ $t('价值') }}：</span>
              <span>100 U</span>
            </div>
            <div>
              <span>{{ $t('类型') }}：</span>
              <span>购物</span>
            </div>
            <div>
              <span>{{ $t('状态') }}：</span>
              <span>待确认</span>
            </div>
          </div>
        </div>

        <div class="flex flex-rb flex-cc">
          <div>
            <span>{{ $t('支付时间') }}：</span>
            <span>2023-08-18 13:21</span>
          </div>

          <div
            class="btn active click"
            @click=";(currentOrder = v), (confirmVisible = true)"
          >
            确认订单
          </div>
          <!-- <div
            class="btn active click"
            @click=";(currentOrder = v), (confirmVisible = true)"
          >
            查看单号
          </div> -->
        </div>
      </li>
    </ul>

    <!-- 确认订单 -->
    <van-popup v-model:show="confirmVisible">
      <div class="popup">
        <div class="flex flex-cc mb-10">
          <img style="width: 120px; height: 80px" class="mr-15" />

          <div class="flex-1">
            <div>洗面奶</div>
            <div>
              <span class="cl-success">{{ $t('价值') }}：</span>
              <span>100 U</span>
            </div>
            <div>
              <span>{{ $t('类型') }}：</span>
              <span>购物</span>
            </div>
            <div>
              <span>{{ $t('状态') }}：</span>
              <span>待确认</span>
            </div>
          </div>
        </div>

        <!-- 订单备注 -->
        <div class="mb-15">
          <div class="mb-10">{{ $t('订单备注') }}</div>
          <van-field :placeholder="$t('请输入订单备注')"></van-field>
        </div>

        <!-- 收货地址 -->
        <div class="mb-15">
          <div class="cl-success click mb-10" @click="router.push('/address')">
            {{ $t('选择收货地址') }}
          </div>
          <div class="flex flex-cc mb-10">
            <div class="flex-fs-0" style="width: 60px">
              {{ $t('收货人') }}：
            </div>
            <van-field
              class="flex-1"
              readonly
              v-model="address.name"
            ></van-field>
          </div>
          <div class="flex flex-cc mb-10">
            <div class="flex-fs-0" style="width: 60px">{{ $t('电话') }}：</div>
            <van-field
              class="flex-1"
              readonly
              v-model="address.tel"
            ></van-field>
          </div>
          <div class="flex flex-cc">
            <div class="flex-fs-0" style="width: 60px">{{ $t('地址') }}：</div>
            <van-field
              class="flex-1"
              readonly
              v-model="address.address"
            ></van-field>
          </div>
        </div>

        <div class="flex flex-rc">
          <div class="btn btn--large click active">{{ $t('确定') }}</div>
        </div>
      </div>
    </van-popup>

    <!-- 查看单号 -->
    <van-popup v-model:show="expressVisible">
      <div class="popup">
        <!-- 快递单号 -->
        <div class="mb-15">
          <div class="mb-10">{{ $t('快递单号') }}</div>
          <van-field disabled v-model="currentOrder.express"></van-field>
        </div>

        <div class="flex flex-rc">
          <div class="btn btn--large click active">{{ $t('确定') }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { formatDateTime, showSuccess } from 'js/utils'
import mitt from 'js/mitt'
import apis from 'js/apis'

const props = defineProps(['tabIndex'])
const router = useRouter()

// 订单
const orders = ref([])
const currentOrder = ref(null)

// 确认订单表单
const address = ref(JSON.parse(localStorage.getItem('address') || '{}'))
const com = ref('')
const confirmVisible = ref(false)

// 查看单号表单
const expressVisible = ref(false)

// 选择地址
mitt.on('selectAddress', (v) => {
  address.value = v
})

watch(
  () => props.tabIndex,
  () => {
    // getOrderList()
  }
)

// getOrderList()

// 获取订单列表
async function getOrderList() {
  const params = {
    status: tabs.value[tabIndex.value].value,
  }

  const { code, data } = await apis.getOrderList(params)

  if (code === 1) {
    orders.value = data
  }
}

// 确认订单
async function confirmOrder() {
  const params = {
    id: currentOrder.value.id,
    address_id: address.value.id,
    com: com.value,
  }

  const { code } = await apis.confirmOrder(params)

  if (code === 1) {
    confirmVisible.value = false
    showSuccess($t('操作成功'))
    getOrderList()
  }
}
</script>

<style lang="scss" scoped></style>
